<template>
	<view>
		<view class="text-center margin-top padding flex flex-direction align-center">
			<uv-icon class="justify-center" name="error-circle-fill" :color="theme == 'fs'?'#006BFE':'#0BCA89'"
				size="44" :bold="true"></uv-icon>
			<view class="text-lg text-black text-bold margin-top-sm">
				取消订单
			</view>
		</view>

		<view class="radius-lg bg-white margin padding">
			<uv-radio-group v-model="radiovalue" placement="column" iconPlacement="right" @change="onChange">
				<view class="padding-tb-sm solid-bottom" v-for="(item, index) in optList" :key="index">
					<uv-radio labelSize="16" :name="item.value" :label="item.label"></uv-radio>
				</view>

			</uv-radio-group>
		</view>

		<view class="text-center color-red margin-top">
			一定时间内取消订单次数过多，则在一定时间内禁止{{theme == 'fs'? '接单': '下单'}}
		</view>

		<view class="foot-box">
			<button class="cu-btn flex-sub" :class="theme=='fs'?'bg-main':'bg-green'" @click="handleCancel">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['theme'])
		},
		data() {
			return {
				radiovalue: 1,
				optList: [{
						label: '临时有事无法前往',
						value: 1
					},
					{
						label: '点错了',
						value: 2
					},
					{
						label: '时间不合理',
						value: 3
					},
					{
						label: '地址太远了',
						value: 4
					},
					{
						label: '其他原因',
						value: 5
					},
				],
				id: '',
			}
		},
		onLoad(option) {
			this.id = option.id
			let url = ''
			if (this.theme == 'farmer') {
				uni.setNavigationBarColor({
					backgroundColor: '#0BCA89',
					frontColor: '#ffffff',
				});
				url = '/system/dict/data/type/cancel_order_farmer'
			} else {
				uni.setNavigationBarColor({
					backgroundColor: '#006BFE',
					frontColor: '#ffffff',
				});
				url = '/system/dict/data/type/cancel_order_fs'
			}
			uni.$uv.http.get(url).then(res => {
				this.optList = res.data.map(item => ({
					name: item.dictLabel,
					label: item.dictLabel,
					value: item.dictValue
				}))
			})
		},
		methods: {
			onChange(e) {
				console.log(e)
			},
			handleCancel() {
				this.$http.get(`/cadre/highSeasOrder/cancel?id=${this.id}`).then(res => {
					uni.showToast({
						icon: 'success',
						title: '取消成功！'
					})
					uni.navigateBack()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.foot-box {
		position: fixed;
		bottom: 0%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		background-color: #fff;
	}
</style>